04. Make All the Headers

Make All the Headers

Websites have different ways to show you, the user, what is important. Take for example…

Big Important Words!

This style of text Big Important Words! is called a header. This should look familiar because almost every website uses headers.

The New York Times mobile site uses them. Check out all of the images below. The heading has a red square around each heading.

CNN sometimes adds headers to images

CNN sometimes adds headers to images

Main Headings and Subheadings

It's also pretty common to see more than one kind of header being used. Here's an example of two headers on Medium.

The main heading with `"Farmers are People too"`, with a sub heading underneath it.

The main heading with "Farmers are People too", with a sub heading underneath it.

TechCrunch using headers to show the titles of featured stories:

A main heading of `"Featured Stories"` with each story having its own subheading.

A main heading of "Featured Stories" with each story having its own subheading.

Let's experiment with headers in a real HTML document

How to Complete this Exercise

See look, I just used a header to help you figure out why this section is here :)

  1. Look at the Workspace on this page. You'll find index.html inside.
  2. Edit index.htmlin the workspace and watch your website change in the preview panel.

Workspace

This section contains either a workspace (it can be a Jupyter Notebook workspace or an online code editor work space, etc.) and it cannot be automatically downloaded to be generated here. Please access the classroom with your account and manually download the workspace to your local machine. Note that for some courses, Udacity upload the workspace files onto https://github.com/udacity, so you may be able to download them there.

Workspace Information:

  • Default file path:
  • Workspace type: html-live
  • Opened files (when workspace is loaded): n/a

Next Concept